<script setup>
import MapComponent from '@/components/Mapcom/MapComponent.vue';
import { provide } from 'vue';
import { ref } from 'vue';

const isopen = ref(false);
const selectedarea = ref(0);
const mapChildRef = ref(null);
//所有的地块的经纬度信息,暂时存在这里
const areasites = [
  { areaname: '北京天安门', longitude: 116.397428, latitude: 39.90923 },
  { areaname: '仲恺校区', longitude: 113.29, latitude: 23.12 }
];
//初始化传递信息给map组件
provide('area-site', areasites[0]);
const handleChange = () => {
  const newCenter = [areasites[selectedarea.value].longitude, areasites[selectedarea.value].latitude]; // 替换为实际想要的新坐标
  if (mapChildRef.value) {
    mapChildRef.value.setCenter(newCenter);
  }
     };
</script>
<template>
  <el-card class="body-box">
    <div class="body">
      <div class="not-map" :style="{ display: isopen ? 'none' : 'flex' }">
        <div class="body-left">
          <div class="left-no1 left-no-general">
            <el-header>
              <div class="div-color"></div>
              <span class="mess-apan">广州 2024-9-8</span>
              <hr style="opacity: 0.3;">
            </el-header>
            <div class="left-no1-2">
            </div>
          </div>
          <div class="left-no2 left-no-general">
            <el-header>
              <div class="div-color"></div>
              <span class="mess-apan">农事任务</span>
              <hr style="opacity: 0.3;">
            </el-header>
          </div>
        </div>
        <div class="body-middle">
          <div class="body-middle-no1 body-middle-general">
            <el-header>
              <div class="div-color"></div>
              <span  class="mess-apan">收支</span>
              <hr style="opacity: 0.3;">
            </el-header>
            <el-main style="padding:0px 20px;">
              <el-table :data="tableDataProduct" style="width: 100%">
                <el-table-column prop="name" label="地块" />
                <el-table-column prop="address" label="类型" />
                <el-table-column prop="where" label="项目" />
                <el-table-column prop="address" label="金额" />
                <el-table-column prop="address" label="日期" />
              </el-table>
            </el-main>
          </div>
          <div class="body-middle-no2-box">
            <div class="body-middle-no2 body-middle-general">
              <el-header>
                <div class="div-color"></div>
                <span  class="mess-apan">采收</span>
                <hr style="opacity: 0.3;">
              </el-header>
              <el-main style="padding:0px 20px;">
                <el-table :data="tableDataProduct" style="width: 100%">
                  <el-table-column prop="address" label="名称" />
                  <el-table-column prop="where" label="采收产品" />
                  <el-table-column prop="address" label="采收重量" />
                </el-table>
              </el-main>
            </div>
            <div class="body-middle-no2 body-middle-general">
              <el-header>
                <div class="div-color"></div>
                <span  class="mess-apan">产品</span>
                <hr style="opacity: 0.3;">
              </el-header>
              <el-main style="padding:0px 20px;">
                <el-table :data="tableDataProduct" style="width: 100%">
                  <el-table-column prop="name" label="名称" />
                  <el-table-column prop="address" label="生长情况" />
                  <el-table-column prop="where" label="管理产品" />
                </el-table>
              </el-main>
            </div>
          </div>
        </div>
      </div>
      <div class="body-map" :style="{ width: isopen ? '100%' : '7%' }">
        <div class="show-img blurred">
          <MapComponent ref="mapChildRef"></MapComponent>
        </div>
        <div class="show-close" :style="{ display: !isopen ? 'none' : 'block' }">
          <select id="mySelect" v-model="selectedarea" @change="handleChange">
            <option value=0>地块一</option>
            <option value=1>地块二</option>
          </select>
        </div>
        <button class="show-open" @click="() => { isopen = !isopen; }">
          <h3>&lt;&gt;</h3>
        </button>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
@import url('./Subhome.css');
</style>
